<template>
	<view>
		<view v-if="propCloseMsg != ''" class="yujiazai_box">
			<view class="yujiazai_box_text tc">{{propCloseMsg}}</view>
		</view>
		<view v-else class="yujiazai_box">
			<view class="spacing-mb">
				<uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
			</view>
			<view class="spacing-mb">
				<uv-skeletons :loading="loading" :skeleton="skeleton2"></uv-skeletons>
			</view>
			<view class="spacing-mb">
				<uv-skeletons :loading="loading" :skeleton="skeleton3"></uv-skeletons>
			</view>
			<view class="spacing-mb">
				<uv-skeletons :loading="loading" :skeleton="skeleton4"></uv-skeletons>
			</view>
			<view class="spacing-mb">
				<uv-skeletons :loading="loading" :skeleton="skeleton5"></uv-skeletons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tj-skeletons",
		data() {
			return {
				loading: true,
				skeleton: [{
					type: 'line',
					num: 1,
					gap: '20rpx',
					style: ['height:360rpx;'],
				}],
				skeleton2: [{
					type: 'flex',
					num: 2,
					children: [{
						type: 'custom',
						style: 'width:98rpx;height:98rpx;borderRadius:49rpx;'
					}, {
						type: 'custom',
						style: 'width:98rpx;height:98rpx;borderRadius:49rpx;marginLeft:50rpx;'
					}, {
						type: 'custom',
						style: 'width:98rpx;height:98rpx;borderRadius:49rpx;marginLeft:50rpx;'
					}, {
						type: 'custom',
						style: 'width:98rpx;height:98rpx;borderRadius:49rpx;marginLeft:50rpx;'
					}, {
						type: 'custom',
						style: 'width:98rpx;height:98rpx;borderRadius:49rpx;marginLeft:50rpx;'
					}]
				}],
				skeleton3: [{
					type: 'line',
					num: 1,
					gap: '20rpx',
					style: ['height:160rpx;'],
				}],
				skeleton4: [{
					type: 'flex',
					num: 1,
					children: [{
						type: 'custom',
						style: 'width:350rpx;height:160rpx;borderRadius:15rpx;'
					}, {
						type: 'custom',
						style: 'width:350rpx;height:160rpx;borderRadius:15rpx;marginLeft:15rpx;'
					}]
				}],
				skeleton5: [{
					type: 'flex',
					num: 5,
					children: [{
						type: 'custom',
						num: 1,
						style: 'width:136rpx;height:136rpx;marginRight: 30rpx;'
					}, {
						type: 'line',
						num: 3,
						style: [null, 'width:360rpx;', 'width:200rpx;']
					}]
				}],
			};
		},
		props: {
			propCloseMsg: {
				type: [String],
				default: ''
			}
		}
	}
</script>

<style>
.yujiazai_box{padding:20rpx;padding-top: calc(env(safe-area-inset-top) + 20rpx);}
.yujiazai_box_text{font-size:32rpx;margin-top:150rpx;}
</style>